<template>
  <div id="monitor-config">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <el-row :gutter="5" class="monitor-row">
          <label>人像视屏</label>
          <el-form>
            <template v-for="(item, i) in entitys">
              <el-form-item v-if="item.monitorType == 0" v-bind:key="i" label="摄像头地址" prop="name">
                <el-col :span="14">
                  <el-input v-model="item.cameraUrl"></el-input>
                </el-col>
                <el-col :span="3">
                  <el-switch v-model="item.cameraState"></el-switch>
                </el-col>
                <el-col :span="3">
                  <el-button @click="submit(item)">保存</el-button>
                </el-col>
              </el-form-item>
            </template>
          </el-form>
          <label>车辆视频</label>
          <el-form>
            <template v-for="(item, i) in entitys">
              <el-form-item v-if="item.monitorType == 1" v-bind:key="i" label="摄像头地址" prop="name">
                <el-col :span="14">
                  <el-input v-model="item.cameraUrl"></el-input>
                </el-col>
                <el-col :span="3">
                  <el-switch v-model="item.cameraState"></el-switch>
                </el-col>
                <el-col :span="3">
                  <el-button @click="submit(item)">保存</el-button>
                </el-col>
              </el-form-item>
            </template>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    let self = this
    return {
      entity: {},
      entitys: []
    }
  },
  created() {},
  mounted() {
    this.pullConfig()
  },
  methods: {
    pullConfig() {
      let self = this
      let axios = self.axios
      let url = axios.adornUrl('/camera/list')
      axios({
        url: url,
        method: 'get'
      })
        .then(({ data }) => {
          console.log(data)
          this.entitys = data
        })
        .catch((e) => {})
    },
    submit(data) {
      console.log(data)

      let self = this
      let axios = self.axios
      let url = axios.adornUrl('/camera/cameraUpdate')
      axios({
        url: url,
        method: 'post',
        data: data
      })
        .then(({ data }) => {
          console.log(data)
        })
        .catch((e) => {})
    }
  },
  watch: {}
}
</script>

<style scoped lang="less">
.monitor-row {
  border: 1px solid rgb(173, 177, 175);
  box-shadow: 10px 10px 5px #888888;
  .camera-addr {
    width: 70%;
  }
}
</style>
